<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <link href="bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="showFoodList.css" type="text/css" />

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>


</head>
<body>
<div class="div-cart-icon">
    <button type="button" class="btn btn-success show-carticon-btn" aria-label="Left Align">
        <span class="glyphicon glyphicon-shopping-cart " aria-hidden="true"></span>
        <span class="point"></span>
    </button>
</div>
<div class="container" style="margin-top: 50px; margin-bottom: 100px;">
    <div class="table_container">

        <h1 class="m_name" id="${m_id}">${m_name }</h1>

        <div id="categories">
            <c:forEach items="${categoriesList }" var="type">
                <button type="button" class="btn btn-primary" id="${type.id }">${type.type }</button>
            </c:forEach>
            <a type="button" class="btn btn-danger" href="showMerchants">返回</a>
        </div>

        <div class="title_div">
            <table class="table table-bordered table-hover" id="tableId">
                <thead>
                <tr>
                    <th class="title_td">食品图片</th>
                    <th class="title_td">食品名称</th>
                    <th class="title_td">价格</th>
                    <th class="title_td">操作</th>
                </tr>
                </thead>
                <tbody id="tbodyId">
                <c:forEach items="${foodList}" var="food">
                    <tr>
                        <td><a href="showMerchant?m_id=${merchant.id }&m_name=${merchant.name }"><img
                                src="${applicationScope.readPath}/${food.image }" style="width:100px; height:100px"></a>
                        </td>
                        <td><a href="showMerchant?m_id=${merchant.id }&m_name=${merchant.name }">${food.name }</a></td>
                        <td>${food.price }</td>
                        <td>
                            <button class="btn btn-default" onclick="addToCart($(this))">加入购物车</button>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>

        <div id="cart-body">
            <span id="cart-body-top">购物车</span>
            <div id="cart">
                <c:forEach items="${sessionScope.orderList}" var="order">
                    <ul class="list-ul">
                        <li class="food_name">${order.name}</li>
                        <li>${order.price}</li>
                        <li>
                            <button onclick='del($(this))'>-</button>
                            <span>${order.amount}</span>
                            <button onclick='up($(this))'>+</button>
                        </li>
                    </ul>
                </c:forEach>
            </div>
            <div id="sum" style="line-height: 40px"></div>
            <button type="button" class="btn btn-success take_order_btn">结算</button>
        </div>
    </div>

</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" style="margin-top:50px">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="width: 400px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body" style="margin:30px;text-align:center;font:lighter;"></div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary" id="modal_login">确定</button>
            </div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript" src="showFoodList.js"></script>
</html>